<template>
  <div>
    <h1>Query Book</h1>
    <el-input v-model="title" placeholder="请输入搜索标题"></el-input>
    <el-button type="primary" @click="refresh">查询</el-button>
    <el-table :data="bookList" stripe style="width: 100%">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="bookName" label="书名"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column
        prop="beautyDate"
        label="发布日期"
        width="200px"
      ></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      title: "",
      bookList: [],
    };
  },
  methods: {
    refresh() {
      axios.get(`/api/search?name=${this.title}`).then((res) => {
        let tmp = [];
        res.data.forEach((item) => {
          item.beautyDate = new Date(item.publicationDate).toLocaleString();
          tmp.push(item);
        });
        this.bookList = res.data;
      });
    },
  },
};
</script>

<style scoped>
</style>
